<template>
    <!-- header部分 -->
    <header>
        <p>注册</p>
    </header>
    <!-- 表单部分 -->
    <div style="height: 8vh"></div>
    <a-form
        style="max-width: 480px; margin: 0 auto"
        label-align="left"
        auto-label-width
        :model="form"
        @submit="handleSubmit"
        class="form-box">

        <li>
            <div class="title">
                手机号码：
            </div>
            <div class="content">
                <a-form-item field="userPhone"
                             :rules="[{ required: true, message: '请输入手机号' }, { minLength:4, match: /^\d{4,}$/, message: '手机号格式错误(四位数字以上)' }]">
                    <a-input v-model="form.userPhone" placeholder="请输入手机号" />
                </a-form-item>
            </div>
        </li>
        <li>
            <div class="title">
                密码：
            </div>
            <div class="content">
                <a-form-item
                    field="password"
                    :rules="[{ required: true, message: '密码不能为空' }, { minLength:5,  message: '密码至少需要五位任意字符' }]"
                >
                    <a-input-password v-model="form.password" placeholder="请输入密码" />
                </a-form-item>
            </div>
        </li>
        <li>
            <div class="title">
                确认密码：
            </div>
            <div class="content">
                <a-form-item
                    field="confirmPassword"
                    :rules="[{ required: true, message: '确认密码不能为空' }, { minLength:5,  message: '确认密码至少需要五位任意字符' }]"
                >
                    <a-input-password v-model="form.confirmPassword" placeholder="确认密码" />
                </a-form-item>
            </div>
        </li>
        <li>
            <div class="title">
                用户名称：
            </div>
            <div class="content">
                <a-form-item field="userName"
                             :rules="[{ required: true, message: '用户名不能为空' }]">
                    <a-input v-model="form.userName" placeholder="请输入用户名" />
                </a-form-item>
            </div>
        </li>
        <li>
            <div class="title">
                选择头像
            </div>
            <div class="content">
                <a-form-item
                    field="file"
                    :rules="[{ required: true, message: '用户头像不能为空' }]"
                >
                    <a-space direction="vertical" :style="{ width: '100%' }">
                        <a-upload
                            action="/"
                            :fileList="form.file ? [form.file] : []"
                            :show-file-list="false"
                            @change="onChange"
                            @progress="onProgress"
                        >
                            <template #upload-button>
                                <div
                                    :class="`arco-upload-list-item${
            form.file && form.file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
                                >
                                    <div
                                        class="arco-upload-list-picture custom-upload-avatar"
                                        v-if="form.file && form.file.url"
                                    >
                                        <img :src="form.file.url"/>
                                        <div class="arco-upload-list-picture-mask">
                                        </div>
                                        <a-progress
                                            v-if="form.file.status === 'uploading' && form.file.percent < 100"
                                            :percent="form.file.percent"
                                            type="circle"
                                            size="mini"
                                            :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                                        />
                                    </div>
                                    <div class="arco-upload-picture-card" v-else>
                                        <div class="arco-upload-picture-card-text">
                                            <div style="margin-top: 10px; font-weight: 600">Upload</div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </a-upload>
                    </a-space>
                </a-form-item>
            </div>
        </li>
        <a-button type="primary" html-type="submit" style="margin: 0 auto;width: 120px"
        >注册
        </a-button>
    </a-form>

</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {UserRegisterRequest} from "../type/user";
import ACCESS_ENUM from "../access/accessEnum.ts";

import router from "../router";
import {registerAPI} from "../service/user.ts";

const onChange = (_, currentFile) => {
    form.file = {
        ...currentFile,
    };
};
const onProgress = (currentFile) => {
    form.file = currentFile;
};
const form = reactive({
    userPhone: "",
    password: "",
    userRole:ACCESS_ENUM.USER,
    biz:"food_image",
    confirmPassword:''
} as UserRegisterRequest);

/**
 * 注册逻辑
 * */
const handleSubmit = async ()=>{
    //数据校验
    if(form.userPhone === ""
        || form.password === ""
        || form.file === undefined ||form.confirmPassword === ""){
        alert("数据不能为空")
        return ''
    }
    if(form.password !== form.confirmPassword){
        alert("两次密码不一致")
        return ''
    }
    form.file = form.file.file
    const formData =new FormData()
    console.log(form)
    for (const key in form) {
        formData.append(key, form[key])
    }
    const res = await registerAPI(formData)
    if (res.data){
        await alert("注册成功，请前往登录")
        await router.back();
    }else {
        alert("注册失败，错误："+res.message)
    }
}
</script>

<style scoped>
/****************** header部分 ******************/
header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}
/****************** 表单部分 ******************/
.form-box {
    width: 100%;
    margin-top: 12vw;
}
.form-box li {
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
    align-items: center;
}
.form-box li .title {
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}
.form-box li .content {
    flex: 1;
}
.form-box li .content input {
    border: none;
    outline: none;
    width: 100%;
    height: 4vw;
    font-size: 3vw;
}
.button-login {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}
.button-login button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #fff;
    background-color: #38CA73;
    border-radius: 4px;
    border: none;
    outline: none;
}
.button-register {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}
.button-register button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #666;
    background-color: #EEE;
    border-radius: 4px;
    outline: none;
    border: solid 1px #DDD;
}
</style>
